{%extends 'index.html'%}

{%block style%}
<style type="text/css">
  header{
    background: #eee;
    font-family: '楷体';
    height: 7rem;
    margin-bottom: 20px;
  }
  header>div>h2{
    line-height: 6rem;
    margin-top: 4px;
  }
  .mydiv{
    margin-bottom: 20px;
  }
</style>
{%endblock%}

{%block content%}
<header>
    <div class="container">
        <h2>课程管理</h2>
    </div>
</header>

<div class="container">
        <div class="btn-group mydiv">
            
            <button type="button" class="btn btn-default ">Web前端</button>
            <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
               
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              {%for item in cour%}
                  <li><a href="/{{item.id}}">{{item.name}}</a></li>
              {%endfor%}
            </ul>
            </div>
        </div>
        <div class="btn-group btn-group-lg mydiv">
            <a href="/index"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span>添加</button></a>
          
        </div>
        <div class="text-center">
            <table class="table table-bordered">
          
          <thead>
            <tr>
              <th class="text-center">课程名称</th>
              <th class="text-center">课程介绍</th>
              <th class="text-center">视频</th>
              <th class="text-center">编辑</th>
              <th class="text-center">删除</th>

            </tr>
          </thead>
          <tbody>
          {%for item in courses%}
            <tr>
                <th>{{item.title}}</th>
                <th>{{item.abstract}}</th>
                <th><a href="/video_one/{{item.id}}"><span class="glyphicon glyphicon-facetime-video"></a></th>
                <th><a href="/index"><span class="glyphicon glyphicon-edit"></span></a></th>
                
                <th><a href="#" onclick="removemodel('{{item.title}}','{{item.id}}')"><span class="glyphicon glyphicon-trash"></span></a></th>
            </tr>
          {%endfor%}
          </tbody>
        </table>
        </div>
        
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" 
            aria-hidden="true">×
        </button>
        <h4 class="modal-title" id="myModalLabel">
          课程的管理：
        </h4>
      </div>
      <div class="modal-body">
        确认要删除吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" 
            data-dismiss="modal">关闭
        </button>
        <button type="button" class="btn btn-primary remove">
          提交更改
        </button>
      </div>

{%endblock%}

{% block script %}
<script type="text/javascript" src="/static/course.js"></script>
{% endblock %}